<template>
	<view>
		<view class="swiper">
			<swiper :indicator-dots="true" style="height: 750rpx;" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(item,index) in info.resourceList" :key='index'>
					<image :src="item.resourceUrl" style="width: 100%;height: 100%;" mode=""></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="name flex_center">
			{{info.name}}
		</view>
		<view class="price flex_center">
			<text>¥ {{info.standardList[0].retailPrice}}+</text><text style="color: #E0BC60;">{{info.standardList[0].maxScore}}积分</text>
		</view>
		<view class="flex_center">
			<image class="img" src="../../static/down.png" mode=""></image>
		</view>
		<image :src="info.introduction" lazy-load style="width: 100vw;" mode="widthFix"></image>
		<view class="top" style="height: 100rpx;">
			
		</view>
		<view class="sure flex_v_venter">
			<view class="q flex_coum_center" @click="totab('/pages/cart/cart')">
				<image src="../../static/cart.png" mode=""></image>
				<text>购物车</text>
			</view>
			<view class="q flex_coum_center" @click="totab('/pages/home/home')">
				<image src="../../static/index.png" mode=""></image>
				<text>首页</text>
			</view>
			<view class="btn w flex_center" @click="addCar">
				加入购物车
			</view>
			<view class="btn e flex_center" @click="open">
				立即购买
			</view>
		</view>
		<popupLayer  ref="popupRef" :direction="'top'" v-model="boolShow">
			<view class="box_sure" style="display: flex;flex-direction: column;">
				<view class="imgc">
					<image :src="info.thumbnail" style="width: 100%;height: 100%;" mode=""></image>
				</view>
				<view class="box_message">
					<view class="flex_r_between">
						<text>{{info.standardList[gId].name}}</text>
						<view class="ss flex_v_venter">
							<text @click="num == 1 ? '' : num--">-</text>
							<text>{{num}}</text>
							<text @click="num++">+</text>
						</view>
					</view>
				</view>
				<view class="gg">
					<view class="title flex_v_venter">
						选择规格：
					</view>
					<view class="box_tag">
						<text v-for="(item,index) in info.standardList" :key='item.id' :style="gId == index ? 'color:#fff;background:#333333' : ''" @click="gId = index">{{item.name}}</text>
					</view>
				</view>
				<view class="" style="background: #fff;height: 98rpx;">
					
				</view>
				<view class=" bot flex_v_venter">
					<view class="q flex_center" @click="close">
						<image  src="../../static/close.png" mode=""></image>
					</view>
					<view class="w flex_center">
						<text>价格：￥{{info.standardList[gId].retailPrice}}+</text>
						<text style="color: #E0BC60;">{{info.standardList[gId].maxScore}}积分</text>
					</view>
					<view class="e flex_center" @click="shopGood">
						{{ type ==1 ? '立即购买' : '加入购物车'}}
					</view>
				</view>
			</view>
		</popupLayer>
	</view>
</template>

<script>
	import popupLayer from '../../components/pop/popup-layer.vue'
	export default {
		data() {
			return {
				show:false,
				boolShow:false,
				num:1,
				type:1,
				id:'',
				gId:0,
				info:{}
			};
		},
		onLoad(e) {
			this.id = e.id
			this.$ajax('api/Goods/QueryDetail',{id:e.id}).then(res => {
				this.info = res.Data
			})
		},
		components:{
			popupLayer
		},
		methods:{
			totab(url){
				uni.switchTab({
					url
				})
			},
			open(){
				this.type = 1
				this.$refs.popupRef.show();
			},
			close(){
				this.$refs.popupRef.close();
			},
			shopGood(){
				if(this.type == 1){
					let data ={
						count:this.num,
						id:this.info.standardList[this.gId].id
					}
					this.$ajax('api/Order/PlaceOrderInit',data).then(res => {
						this.$store.commit('CHANGE_INITORDER',JSON.stringify(res.Data))
						uni.navigateTo({
							url:'./order-detail'
						})
					})
				}else{
					let that = this
					uni.showModal({
						title: '提示',
						content: '确定加入购物车',
						showCancel: true,
						cancelText: '取消',
						confirmText: '确定',
						success: res => {
							if(res.confirm){
								this.$ajax('api/ShoppingCar/Add',{id:that.info.standardList[this.gId].id}).then(pose => {
									uni.showToast({
										title:'加入成功'
									})
								})
							}
						},
						fail: () => {},
						complete: () => {}
					});
				}
				
			},
			addCar(){
				this.type = 2
				this.$refs.popupRef.show();
			}
		}
	}
</script>

<style lang="less">

.swiper {
		width: 100%;
		border-bottom: 1px solid #EDEDED;
		.swiper-item {
			width: 100%;
			height: 900rpx;
			background-color: #C0C0C0;
			position: relative;
			&>image{
				width: 100%;
				height: 100%;
				
			}
		}
	}
.name{
	font-size: 30rpx;
	font-family: Source Han Sans CN;
	font-weight: bold;
	color: #333333;
	margin: 52rpx 0 54rpx;
}
.desoribe{
	font-size: 25rpx;
	font-family: Source Han Sans CN;
	color: #888;
	line-height: 35rpx;
	margin:  0 0 ;
}
.img{
	width: 24rpx;
	height: 12rpx;
	margin: 70rpx auto 20rpx;
}
.sure{
	height: 100rpx;
	position: fixed;
	bottom: 0;
	width: 100%;
	background: #fff;
	image{
		width: 40rpx;
		height: 40rpx;
		margin: 10rpx 0 0;
	}
	text{
		font-size: 20rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #20202A;
		line-height: 40rpx;
	}
	.q{
		flex: 1;
	}
	.btn{
		height: 100%;
		flex: 3;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
	}
	.w{
		background: #DCC68D;
	}
	.e{
		background: #202029;
	}
}
.box_sure{
	background: rgba(0,0,0,0);
	position: relative;
	.imgc{
		width: 160rpx;
		height: 160rpx;
		background: #ccc;
		position: absolute;
		top: 0;
		margin: 0 30rpx;
		box-shadow: 0 0 5rpx 2rpx #EDEDED;
	}
	.box_message{
		background: #fff;
		margin: 94rpx 0 0;
		padding: 94rpx 30rpx 56rpx;
		width: 100%;
		border-bottom: 1px solid #EDEDED;
	}
	.ss{
		border: 1px solid #EDEDED;
		padding: 5rpx 0;
		border-radius: 10rpx;
		&>text{
			&{
				padding: 0 17rpx;
			}
			&:nth-child(2){
				padding: 0 55rpx;
				font-size: 25rpx;
			}
			&:first-child{
				border-right: 1px solid #EDEDED;
			}
			&:last-child{
				border-left: 1px solid #EDEDED;
			}
		}
	}
	.gg{
		background: #fff;
		padding: 0 30rpx;
		.title{
			height: 101rpx;
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #333333;
		}
	}
	.box_tag{
		margin: 20rpx 0 0;
		display: flex;
		flex-wrap: wrap;
		&>text{
		padding: 11rpx 23rpx;
			border-radius: 10rpx;
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #333333;
			border: 1px solid #333333;
			margin: 0 40rpx 40rpx 0;
		}
	}
	.bot{
		height: 98rpx;
		background: #fff;
		border-top: 1px solid #EDEDED;
		.q{
			flex: 1;
			height: 100%;
			border-right: 1px solid #EDEDED;
			&>image{
				width: 28rpx;
				height: 28rpx;
			}
		}
		.w{
			flex: 3;
			height: 100%;
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #202029;
		}
		.e{
			flex: 2;
			height: 100%;
			background: #DCC68D;
			font-size: 30rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
		}
	}
}
</style>
